{% extends 'layout.html' %}
{% load custom_filters %}
{% block title %}巡检请求{% endblock %}
{% block content %}
<div class="row">
    <div class="col-6">换电站编号：{{ inspect_request.station_id }}</div>
    <div class="col-6">换电站名称：<a href="/station/{{inspect_request.station_id}}">{{ inspect_request.station_name }}</a></div>
    <div class="col-6">监控通道名称：{{ inspect_request.channel_name }}</div>
    <div class="col-6">巡检名称：{{ inspect_request.inspect_name }}</div>
    <div class="col-6">抓拍时间：{{ inspect_request.photo_url|get_photo_time}}</div>
    <div class="col-6">检测时间：{{ inspect_request.timestamp|timestamp_to_string}}</div>
    <div class="col-6">
        巡检结果：
        {% if final_results %}
            {% for final_result in final_results %}
                {{final_result.target_type}}
            {% endfor %}
        {% else %}
            未检出异常
        {% endif %}
    </div>
    <div class="col-6">人工复核：{{inspect_request.verification}}</div>
</div>
<div class="row" align="center">
    <div class="col-4">
        <a role="button" accesskey="z" class="btn btn-success" href="/inspect_request_verify/{{inspect_request.request_name}}/normal">正常</a>
    </div>
    <div class="col-4">
        <a role="button" accesskey="w" class="btn btn-info" href="/inspect_request_verify/{{inspect_request.request_name}}/no_target">未发现目标</a>
    </div>
    <div class="col-4">
        <a role="button" accesskey="q" class="btn btn-warning" href="/inspect_request_verify/{{inspect_request.request_name}}/broken">缺陷</a>
    </div>
</div>
<hr>
<div class="row">
    <div class="col">
        <div class="image-container">
            <img width="960px" height="540px" src="{{ inspect_request.photo_url }}">
            {% if intermediate_results %}
            {% for intermediate_result in intermediate_results %}
            <style>
                .image-container{
                position: relative;
                display: inline-block;
                }
                .image-container img{
                    display: block;
                    width: 100%;
                }
                .rectangle{{ intermediate_result.target_type }}{{ intermediate_result.target_id }}{
                    position: absolute;
                    top: {{ intermediate_result.y|div:2 }}px;
                    left: {{ intermediate_result.x|div:2 }}px;
                    width: {{ intermediate_result.width|div:2 }}px;
                    height: {{ intermediate_result.height|div:2 }}px;
                    border: 1px solid yellow;
                }
                .title{{ intermediate_result.target_type }}{{ intermediate_result.target_id }}{
                    position: absolute;
                    top: {{ intermediate_result.y|get_top }}px;
                    left: {{ intermediate_result.x|div:2 }}px;
                    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
                    color: blue;
                    padding: 5px;
                }
            </style>
            <div class="rectangle{{ intermediate_result.target_type }}{{ intermediate_result.target_id}}"></div>
            <div class="title{{ intermediate_result.target_type }}{{ intermediate_result.target_id}}">{{ intermediate_result.target_type}}{{ intermediate_result.target_id}}</div>
            {% endfor %}
            {% else %}
                <div class="alert alert-warning">
                    未查询到该巡检请求的中间结果
                </div>
            {% endif %}
            {% if final_results %}
                {% for final_result in final_results %}
                    <style>
                        .image-container{
                        position: relative;
                        display: inline-block;
                        }
                        .image-container img{
                            display: block;
                            width: 100%;
                        }
                        .rectangle{{ final_result.target_type }}{{ final_result.target_id }}{
                            position: absolute;
                            top: {{ final_result.y|div:2 }}px;
                            left: {{ final_result.x|div:2 }}px;
                            width: {{ final_result.width|div:2 }}px;
                            height: {{ final_result.height|div:2 }}px;
                            border: 1px solid yellow;
                        }
                        .title{{ final_result.target_type }}{{ final_result.target_id }}{
                            position: absolute;
                            top: {{ final_result.y|get_top }}px;
                            left: {{ final_result.x|div:2 }}px;
                            background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
                            color: blue;
                            padding: 5px;
                        }
                    </style>
                    <div class="rectangle{{ final_result.target_type }}{{ final_result.target_id}}"></div>
                    <div class="title{{ final_result.target_type }}{{ final_result.target_id}}">{{ final_result.target_type}}{{ final_result.target_id}}</div>
                {% endfor %}
            {% else %}
                <div class="alert alert-warning">未查询到该巡检请求的最终结果</div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}